
<template>
  <div class="load-optimization-container">
    <div class="page-header">
      <div class="header-title">
        <h2>装载优化</h2>
        <span class="subtitle">智能规划货物装载方案</span>
      </div>
      <div class="header-actions">
        <el-button-group>
          <el-button type="primary" @click="startOptimization" :loading="optimizing">
            <el-icon><Box /></el-icon>开始优化
          </el-button>
          <el-button @click="resetPlan">
            <el-icon><RefreshLeft /></el-icon>重置
          </el-button>
        </el-button-group>
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 左侧：货物信息和规则设置 -->
      <el-col :span="8">
        <el-card class="cargo-card">
          <template #header>
            <div class="card-header">
              <span>货物信息</span>
              <el-button type="primary" link @click="addCargo">
                添加货物
              </el-button>
            </div>
          </template>

          <el-form
            ref="cargoFormRef"
            :model="cargoForm"
            :rules="cargoRules"
            label-position="top"
          >
            <!-- 货物列表 -->
            <div class="cargo-list">
              <div 
                v-for="(cargo, index) in cargoForm.cargoList" 
                :key="index"
                class="cargo-item"
              >
                <div class="cargo-header">
                  <span>货物 #{{ index + 1 }}</span>
                  <el-button 
                    type="danger" 
                    link 
                    @click="removeCargo(index)"
                  >
                    删除
                  </el-button>
                </div>

                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-form-item 
                      :prop="'cargoList.' + index + '.name'"
                      :rules="{ required: true, message: '请输入货物名称', trigger: 'blur' }"
                    >
                      <el-input 
                        v-model="cargo.name"
                        placeholder="货物名称"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item 
                      :prop="'cargoList.' + index + '.quantity'"
                      :rules="{ required: true, message: '请输入数量', trigger: 'blur' }"
                    >
                      <el-input-number
                        v-model="cargo.quantity"
                        :min="1"
                        placeholder="数量"
                        class="w-full"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="12">
                  <el-col :span="8">
                    <el-form-item 
                      :prop="'cargoList.' + index + '.length'"
                      :rules="{ required: true, message: '请输入长度', trigger: 'blur' }"
                    >
                      <el-input-number
                        v-model="cargo.length"
                        :min="0"
                        placeholder="长(cm)"
                        class="w-full"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item 
                      :prop="'cargoList.' + index + '.width'"
                      :rules="{ required: true, message: '请输入宽度', trigger: 'blur' }"
                    >
                      <el-input-number
                        v-model="cargo.width"
                        :min="0"
                        placeholder="宽(cm)"
                        class="w-full"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item 
                      :prop="'cargoList.' + index + '.height'"
                      :rules="{ required: true, message: '请输入高度', trigger: 'blur' }"
                    >
                      <el-input-number
                        v-model="cargo.height"
                        :min="0"
                        placeholder="高(cm)"
                        class="w-full"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-form-item 
                      :prop="'cargoList.' + index + '.weight'"
                      :rules="{ required: true, message: '请输入重量', trigger: 'blur' }"
                    >
                      <el-input-number
                        v-model="cargo.weight"
                        :min="0"
                        placeholder="重量(kg)"
                        class="w-full"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :prop="'cargoList.' + index + '.priority'">
                      <el-select
                        v-model="cargo.priority"
                        placeholder="优先级"
                        class="w-full"
                      >
                        <el-option label="高" value="high" />
                        <el-option label="中" value="medium" />
                        <el-option label="低" value="low" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item :prop="'cargoList.' + index + '.constraints'">
                  <el-checkbox-group v-model="cargo.constraints">
                    <el-checkbox label="stackable">可堆叠</el-checkbox>
                    <el-checkbox label="fragile">易碎品</el-checkbox>
                    <el-checkbox label="upright">保持直立</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-card>

        <!-- 装载规则 -->
        <el-card class="rules-card">
          <template #header>
            <div class="card-header">
              <span>装载规则</span>
            </div>
          </template>

          <el-form
            ref="rulesFormRef"
            :model="rulesForm"
            label-position="top"
          >
            <el-form-item label="装载目标">
              <el-radio-group v-model="rulesForm.objective">
                <el-radio label="volume">体积利用率优先</el-radio>
                <el-radio label="weight">重量分布优先</el-radio>
                <el-radio label="mixed">综合优化</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="装载限制">
              <el-checkbox-group v-model="rulesForm.constraints">
                <el-checkbox label="weight_limit">重量限制</el-checkbox>
                <el-checkbox label="height_limit">高度限制</el-checkbox>
                <el-checkbox label="balance">重心平衡</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="其他规则">
              <el-switch
                v-model="rulesForm.autoAdjust"
                active-text="自动调整方向"
              />
              <el-switch
                v-model="rulesForm.considerPriority"
                active-text="考虑优先级"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧：3D预览和结果 -->
      <el-col :span="16">
        <!-- 3D预览 -->
        <el-card class="preview-card">
          <template #header>
            <div class="card-header">
              <span>装载预览</span>
              <div class="preview-controls">
                <el-button-group>
                  <el-button size="small" @click="rotateView">
                    <el-icon><Refresh /></el-icon>
                  </el-button>
                  <el-button size="small" @click="resetView">
                    <el-icon><RefreshRight /></el-icon>
                  </el-button>
                </el-button-group>
              </div>
            </div>
          </template>

          <div class="preview-container">
            <!-- 实际应用中这里会集成3D预览组件 -->
            <div class="preview-placeholder">
              <el-empty description="3D预览加载中...">
                <template #image>
                  <el-icon style="font-size: 60px"><Box /></el-icon>
                </template>
              </el-empty>
            </div>
          </div>
        </el-card>

        <!-- 优化结果 -->
        <el-card v-if="optimizationResult" class="result-card">
          <template #header>
            <div class="card-header">
              <span>优化结果</span>
              <el-button-group>
                <el-button type="success" size="small" @click="applyPlan">
                  应用方案
                </el-button>
                <el-button type="primary" size="small" @click="exportPlan">
                  导出方案
                </el-button>
              </el-button-group>
            </div>
          </template>

          <el-descriptions :column="2" border>
            <el-descriptions-item label="体积利用率">{{ optimizationResult.volumeUsage }}%</el-descriptions-item>
            <el-descriptions-item label="重量利用率">{{ optimizationResult.weightUsage }}%</el-descriptions-item>
            <el-descriptions-item label="装载层数">{{ optimizationResult.layers }}层</el-descriptions-item>
            <el-descriptions-item label="剩余空间">{{ optimizationResult.remainingSpace }}m³</el-descriptions-item>
          </el-descriptions>

          <div class="loading-sequence">
            <h4>装载顺序</h4>
            <el-steps :active="optimizationResult.sequence.length" direction="vertical">
              <el-step 
                v-for="(step, index) in optimizationResult.sequence"
                :key="index"
                :title="step.cargo"
                :description="step.position"
              />
            </el-steps>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Box,
  RefreshLeft,
  Refresh,
  RefreshRight
} from '@element-plus/icons-vue'

// 表单引用
const cargoFormRef = ref(null)
const rulesFormRef = ref(null)

// 货物表单数据
const cargoForm = reactive({
  cargoList: [
    {
      name: '',
      quantity: 1,
      length: 0,
      width: 0,
      height: 0,
      weight: 0,
      priority: 'medium',
      constraints: []
    }
  ]
})

// 规则表单数据
const rulesForm = reactive({
  objective: 'mixed',
  constraints: ['weight_limit', 'balance'],
  autoAdjust: true,
  considerPriority: true
})

// 优化状态
const optimizing = ref(false)

// 优化结果
const optimizationResult = ref(null)

// 添加货物
const addCargo = () => {
  cargoForm.cargoList.push({
    name: '',
    quantity: 1,
    length: 0,
    width: 0,
    height: 0,
    weight: 0,
    priority: 'medium',
    constraints: []
  })
}

// 删除货物
const removeCargo = (index) => {
  cargoForm.cargoList.splice(index, 1)
}

// 开始优化
const startOptimization = async () => {
  if (!cargoFormRef.value) return
  
  try {
    await cargoFormRef.value.validate()
    
    optimizing.value = true
    
    // 模拟优化过程
    setTimeout(() => {
      // 实际应用中这里应该调用后端API进行装载优化
      optimizationResult.value = {
        volumeUsage: 85,
        weightUsage: 72,
        layers: 3,
        remainingSpace: 1.2,
        sequence: [
          {
            cargo: '货物A',
            position: '底层左前'
          },
          {
            cargo: '货物B',
            position: '底层右前'
          },
          {
            cargo: '货物C',
            position: '第二层中间'
          }
        ]
      }
      
      optimizing.value = false
      ElMessage.success('装载优化完成！')
    }, 2000)
    
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 重置计划
const resetPlan = () => {
  ElMessageBox.confirm(
    '确定要重置所有数据吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    if (cargoFormRef.value) {
      cargoFormRef.value.resetFields()
    }
    if (rulesFormRef.value) {
      rulesFormRef.value.resetFields()
    }
    optimizationResult.value = null
    ElMessage.success('已重置所有数据')
  }).catch(() => {})
}

// 3D视图操作
const rotateView = () => {
  ElMessage.info('旋转视图')
}

const resetView = () => {
  ElMessage.info('重置视图')
}

// 应用方案
const applyPlan = () => {
  ElMessage.success('装载方案已应用')
}

// 导出方案
const exportPlan = () => {
  ElMessage.success('装载方案已导出')
}
</script>

<style scoped>
.load-optimization-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.cargo-card,
.rules-card,
.preview-card,
.result-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cargo-item {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
}

.cargo-item:last-child {
  margin-bottom: 0;
}

.cargo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.preview-container {
  height: 400px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.preview-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-sequence {
  margin-top: 20px;
}

.loading-sequence h4 {
  margin: 0 0 16px 0;
  color: var(--el-text-color-primary);
}

.w-full {
  width: 100%;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
}
</style>